<template>
  <div class="login-container">
    <div class="login-form">
      <h2>系统登录</h2>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="账号密码登录" name="password">
          <el-form :model="passwordForm" :rules="rules" ref="passwordForm">
            <el-form-item prop="username">
              <el-input v-model="passwordForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="passwordForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-button type="primary" @click="handlePasswordLogin">登录</el-button>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="短信验证码登录" name="sms">
          <el-form :model="smsForm" :rules="rules" ref="smsForm">
            <el-form-item prop="phone">
              <el-input v-model="smsForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="smsForm.code" placeholder="请输入验证码">
                <template #append>
                  <el-button @click="sendSmsCode" :disabled="smsCountdown > 0">
                    {{ smsCountdown > 0 ? `${smsCountdown}s后重试` : '获取验证码' }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-button type="primary" @click="handleSmsLogin">登录</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      activeTab: 'password',
      passwordForm: {
        username: '',
        password: ''
      },
      smsForm: {
        phone: '',
        code: ''
      },
      smsCountdown: 0,
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handlePasswordLogin() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.$api.user.passwordLogin({
            username: this.passwordForm.username,
            password: this.passwordForm.password
          }).then(res => {
            console.log('登录响应:', res)
            if (res && res.data.accessToken) {
              localStorage.setItem('token', res.data.accessToken)
              // localStorage.setItem('userInfo', JSON.stringify(res.data.user))
              this.$message.success('登录成功')
              this.$router.push('/')
            } else {
              throw new Error('无效的响应数据')
            }
          }).catch((err) => {
            console.error('登录失败:', err)
            this.$message.error(err.message || '登录失败')
          })
        }
      })
    },
    handleSmsLogin() {
      this.$refs.smsForm.validate(valid => {
        if (valid) {
          this.$api.user.smsLogin({
            phone: this.smsForm.phone,
            code: this.smsForm.code
          }).then(res => {
            console.log('短信登录响应:', res)
            if (res && res.data.accessToken) {
              localStorage.setItem('token', res.data.accessToken)
              localStorage.setItem('userInfo', JSON.stringify(res.data.user))
              this.$message.success('登录成功')
              this.$router.push('/')
            } else {
              throw new Error('无效的响应数据')
            }
          }).catch((err) => {
            console.error('短信登录失败:', err)
            this.$message.error(err.message || '登录失败')
          })
        }
      })
    },
    sendSmsCode() {
      if (!this.smsForm.phone) {
        this.$message.error('请输入手机号')
        return
      }
      
      this.smsCountdown = 60
      const timer = setInterval(() => {
        this.smsCountdown--
        if (this.smsCountdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-form {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.login-form h2 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.el-button--primary {
  width: 100%;
  margin-top: 10px;
}
</style>
